<template>
  <div class="content">
    <el-card>
      <div shadow="never" class="search-wrapper">
        <el-form ref="searchFormRef" :inline="true" :model="searchData">
          <el-form-item prop="name" label="名称">
            <el-input v-model="searchData.name" placeholder="请输入名称" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
            <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
            <el-button type="warning" :icon="Plus" @click="handleAdd">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="mt-4">
      <div v-loading="loading" shadow="never">
        <div class="table-wrapper">
          <el-table :data="tableData" max-height="64vh">
            <el-table-column prop="name" label="名称" align="center" />
            <el-table-column prop="status" label="状态" align="center">
              <template #default="scope">
                <el-tag type="primary" v-if="!scope.row.status">未执行</el-tag>
                <el-tag type="warning" v-if="scope.row.status == 1">执行中</el-tag>
                <el-tag type="success" v-if="scope.row.status == 2">执行完毕</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="300px">
              <template #default="scope">
                <el-button
                  v-if="scope.row.status != 1"
                  type="primary"
                  text
                  bg
                  size="small"
                  @click="handleStart(scope.row)"
                >
                  执行
                </el-button>
                <el-button
                  v-if="scope.row.status == 2"
                  type="primary"
                  text
                  bg
                  size="small"
                  @click="handleView(scope.row)"
                >
                  查看
                </el-button>
                <el-button
                  v-if="scope.row.status != 1"
                  type="primary"
                  text
                  bg
                  size="small"
                  @click="handleUpdate(scope.row)"
                >
                  修改
                </el-button>
                <el-button
                  v-if="scope.row.status != 1"
                  type="danger"
                  text
                  bg
                  size="small"
                  @click="handleDelete(scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="flex justify-end">
            <el-pagination
              v-model:current-page="paginationData.currentPage"
              background
              layout="total, prev, pager, next"
              :total="paginationData.total"
              :page-size="paginationData.pageSize"
              @current-change="getTableData"
              :small="true"
              class="flex justify-end mt-2"
            />
          </div>
        </div>
      </div>
    </el-card>
    <el-dialog v-model="showResult" width="70%" title="结果">
      <el-table
        v-loading="showLoading"
        :data="statisticsList"
        border
        row-key="rowId"
        :expand-row-keys="expandRows"
        :header-cell-style="{ background: '#F5F7FA' }"
      >
        <el-table-column prop="indexName">
          <template #header>
            <div style="text-align: center">指标</div>
          </template>
        </el-table-column>
        <TableColumn v-for="item in headerTree" :key="item.id" :column="item" :isShow="true" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { getStatisticsList, getStatisticsStart, getStatisticsInfo } from '@/api/statistics'
import { Search, Refresh, Plus, ArrowDown } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { reactive } from 'vue-demi'
import TableColumn from './components/tableColumn.vue'
const searchData = reactive({
  name: ''
})
const paginationData = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1
})
const searchFormRef = ref(null)
const loading = ref(false)
const showLoading = ref(false)
const showResult = ref(false)
const tableData = ref([])
const statisticsList = ref([])
const headerTree = ref([])
const expandRows = ref([])
const router = useRouter()
const handleAdd = () => {
  router.push({
    path: '/addStatistics'
  })
}
onMounted(() => {
  getTableData()
})
const handleSearch = () => {
  paginationData.currentPage = 1
  getTableData()
}
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  if (paginationData.currentPage === 1) {
    getTableData()
  }
  paginationData.currentPage = 1
}
const handleUpdate = (row) => {
  router.push({
    path: '/addStatistics',
    query: {
      id: row._id
    }
  })
}
const handleStart = (row) => {
  getStatisticsStart(row._id).then((res) => {
    ElMessage.success('启动成功')
    getTableData()
  })
}
const handleView = (row) => {
  router.push({
    path: '/showStatistics',
    query: {
      id: row._id
    }
  })
  // statisticsList.value = []
  // expandRows.value = []
  // headerTree.value = []
  // showResult.value = true
  // showLoading.value = true
  // getStatisticsStart(row)
  //   .then((res) => {
  //     ElMessage.success('启动成功')
  //     statisticsList.value = res.data.tree
  //     expandRows.value = res.data.tree.map((item) => item.rowId)
  //     getStatisticsInfo(row._id).then((res) => {
  //       headerTree.value = res.data.headerTree
  //     })
  //   })
  //   .finally(() => {
  //     showLoading.value = false
  //   })
}
const getTableData = () => {
  loading.value = true
  getStatisticsList(
    { ...searchData },
    (paginationData.currentPage - 1) * paginationData.pageSize,
    paginationData.pageSize
  )
    .then((res) => {
      tableData.value = res.data.list
      paginationData.total = parseInt(res.data.total)
    })
    .finally(() => {
      loading.value = false
    })
}
</script>

<style lang="scss" scoped></style>
